/**
 * Created by Administrator on 2017/4/10.
 */
var Breadcrumb = require('../../../../src/libs/breadcrumb');
var InputNumber = require('../../../../src/libs/input-number');
var BackAccount = require('../../complex/backAccount');
var Step1 = React.createClass({
    getInitialState: function () {
        return {
            inputNum:window.PageDM.inputNum.value,
            PayBankCards:window.PageDM.PayBankCards.value,
            userInfo:window.PageDM.userInfo.value,
            investSum:0//预期收益
        }
    },
    investSumChangeHandler: function (v) {
        var v = Number(v);
        var val = Math.round((v * this.state.inputNum.FinanceDetail.Interest / 100 / 360 * this.state.inputNum.FinanceDetail.Duration) * 100) / 100;
        window.PageDM.inputNum.value.FinanceDetail.PartsCount = v;
        this.refs.expectedReturn.innerHTML = val;
    },
    componentDidMount: function () {
        var _this = this;
        var PageDM = window.PageDM;

        //确认投资金额
        UEventHub.on(PageDM.inputNum.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function (v) {
            _this.setState({
                inputNum:v
            });
            _this.investSumChangeHandler(v.FinanceDetail.PartsCount);//初始预期收益
        });
    },
    render: function () {
        var _this = this;

        var options = [],BList = _this.state.PayBankCards;
        for (var i=0; i< BList.BankAccountList.length;i++) {
            var item = BList.BankAccountList[i];
            options.push({
                option: "<div><span class='bank-logo " + item.BankIconCss + "'></span><b>" + item.AccountNoShortHide + "</b></div>",
                value: item.BankCode
            });
        }
        var defaultValue = BList.SelectIndex - 1;

        PageDM.PayBankCards.value.UserBankAccountId = BList.BankAccountList[defaultValue].BankCode;    //初始银行卡id

        return (
            <div>
                <Breadcrumb separator='>'>
                    <Breadcrumb.Item href={PageDM.URL.home}>首页</Breadcrumb.Item>
                    <Breadcrumb.Item href={PageDM.URL.invest}>我要投资</Breadcrumb.Item>
                    <Breadcrumb.Item>确认投资金额</Breadcrumb.Item>
                </Breadcrumb>
                <div className="project-ok">
                    <div className="title"><b></b>确认投资金额<b></b></div>
                    <div className="confirm-box">
                        <h3>{this.state.inputNum.FinanceDetail.ProjectName}</h3>
                        <table className="table-1">
                            <tbody>
                            <tr>
                                <th width="500">投标总额</th>
                                <th>预期收益</th>
                                <th>到期回款日</th>
                            </tr>
                            <tr>
                                <td>
                                    <div>
                                        <span>
                                            <InputNumber step={this.state.inputNum.FinanceDetail.AppendBuyAmount}
                                                         max={this.state.inputNum.FinanceDetail.EachPartAmount * this.state.inputNum.FinanceDetail.MaxInvestPartsCount}
                                                         min={this.state.inputNum.FinanceDetail.EachPartAmount * this.state.inputNum.FinanceDetail.MinInvestPartsCount}
                                                         value={this.state.inputNum.FinanceDetail.PartsCount}
                                                         onChange={_this.investSumChangeHandler.bind(_this)}/>
                                        </span>
                                        <span>元</span>
                                    </div>
                                    <p className="fc-main warm">{this.state.inputNum.FinanceDetail.InvestPromptText}</p>
                                </td>
                                <td><b className="fc-main fs20" ref="expectedReturn">{Math.round((this.state.inputNum.FinanceDetail.PartsCount * this.state.inputNum.FinanceDetail.Interest / 100 / 360 * this.state.inputNum.FinanceDetail.Duration) * 100) / 100}</b> 元</td>
                                <td>{this.state.inputNum.FinanceDetail.RepayBegin}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <BackAccount url={PageDM.URL} PayBankCards={this.state.PayBankCards} userInfo={this.state.userInfo} checkbox={PageDM.checkbox}/>

                    <span className="angle angle-top"></span>
                    <span className="angle angle-bottom"></span>
                </div>
            </div>
        )
    }
});
module.exports = Step1;